<template>
	<view :class="usedGrayPage?'page big-event-gray':'page'">
		<navigationIndexBar></navigationIndexBar>
		<view class="top">
		
			<ba-tree-picker v-if="filterPlaceData" ref="treePicker" :multiple='true' @select-change="selectChange"
				title="选择城市" :localdata="filterPlaceData" valueKey="value" textKey="name" childrenKey="submenu" />

			<!-- 搜索 -->
			<view class="search setVerticalCenter " :style="showNavFloat ? 'display:none' : ''">
				<view class="input setNowrap2" @click="clickSearch" hover-class="none">
					
					<uni-icons type="search" color="#ccc" size="20"></uni-icons>
					<text>请输入关键字查询</text>
				</view>
				
				<view class="location setNowrap1" @tap="showPicker">
					<uni-icons type="location" color="#00aa8a" size="22"></uni-icons>

					<text class="setcolor">{{locationName}}</text>
				</view>
			</view>


			

			<!-- 导航 -->
			<view class="navbar" :class="showNavFloat ? 'floatbar' : ''">
				<view class="menu" v-if="category.length > 0">
					<view class="category">
						<scroll-view :scroll-x="true" :scroll-with-animation="true"
							:scroll-into-view="scroll_category_id" @scroll="navFloatShow()">
							<view class="item" v-for="(item, index) in category" :key="index"
								:class="category_id == item.id ? 'current' : ''" :id="'category_id-' + index"
								@tap="categoryChange(item.id, index,item.name)">
								<view class="text">
									<text>{{ item.name }}</text>
									<!-- <image src="/static/images/bg_tab.png"></image> -->
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="list" @tap="menuShow(!showMenu)">
						<!-- <iconfont type="menu-01"></iconfont> -->

						<text class="iconfont iconmenu"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<!-- 点击更多分类热词 -->
			<view class="menu-block fade-in" v-show="showMenu">
				<view class="list">
					<text class="item" v-for="(item, index) in category" :key="index"
						:class="category_id == item.id ? 'current' : ''" :id="'category_id-' + (index + 1)"
						@tap="categoryChange(item.id, index)">
						{{ item.name }}
					</text>
				</view>
			</view>
			<scroller @init="initScroller" @down="refreshData" @up="getData" :up="optUp"
				@scroll="navFloatShow(scroller)" :fixed="false">
				<!-- <swiper v-if="slider.length > 0" class="swiper" :indicator-dots="true" :autoplay="true" :circular="true">
					<swiper-item v-for="(item, index) in slider" :key="index">
						<navigator class="item" hover-class="none" :url="'/pages/article/detail?id=' + item.id">
							<image :lazy-load="true" :src="item.photo_url" mode="aspectFill"></image>
							<view class="title">
								<text>{{ item.title }}</text>
							</view>
						</navigator>
					</swiper-item>
				</swiper> -->
				<view class="classfiy">
					<view @click="toDetailPage(item.name)" style="" class="type  setVertical sethorizontalaround"
						v-for="(item,index) in classfiyList" :key="index">

						<text :class=" item.class" style="font-size: 60rpx;"></text>

						<text>{{item.name}}</text>

					</view>
				</view>
				<articleList :list="list" type="index" />
				<view class="button" @click="showMore">点击查看更多</view>
			</scroller>

		</view>
		<!-- <pageLoading v-if="showPageLoading"></pageLoading> -->

		<zero-loading v-if="showPageLoading" type="love" :mask="true"></zero-loading>

		<!-- 没有网络的情况 -->
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import scroller from '@/components/scroller/scroller.vue';
	import pageLoading from '@/components/loading/pageLoading.vue';
	import iconfont from '@/components/iconfont/iconfont.vue';
	import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue";
	import {
		getMyLocation
	} from '@/plugins/utils.js';
	import together from '@/common/together.js';
	
	
	// 1. 导入uniCloud客户端账户体系，用户信息状态管理模块
	import {
		mutations as uniIdMutations
	} from '@/uni_modules/uni-id-pages/common/store.js';
	
	// 2. 导入uni-im的云对象
	const uniImCo = uniCloud.importObject("uni-im-co",{customUI: true })
	


	// #ifdef APP 
	// 检查更新
	import updateApp from '@/uni_modules/uni-upgrade-center-app/utils/check-update'
	// #endif
	
	
	export default {
		components: {
			pageLoading,
			scroller,
			iconfont,
			baTreePicker
		},
		data() {
			return {
				// 首页是否变灰
				usedGrayPage: false,
				classfiyList: [{
					name: '招标公告',
					class: 'iconfont iconicon_xinyong_xianxing_jijin-190'
				}, {
					name: '中标结果',
					class: 'iconfont iconyejifenxi'
				}, {
					name: '其他公告',
					class: 'iconfont  iconkaitinggonggao'
				}, {
					name: '中标候选人',
					class: 'iconfont iconrenyuan'
				}],

				// 地区数据
				placeData: null,
				// 时间戳
				time: null,
				scroller: {},
				optUp: {
					auto: true,
					onScroll: true,
					page: {
						size: 20
					},
					empty: {
						tip: '部分地区陆续开通中~'
					}
				},

				category_id: 99,
				category_index: 0,
				scroll_category_id: 'scroll_category_id_0',
				currentSliderIndex: 0,
				category: [],
				showMenu: false,
				slider: [],
				list: [],
				showNoData: false,
				showPageLoading: true,
				showNavFloat: false,
				queryData: {
					lbsProvinceName: '',
					lbsAreaName: '',
					provinceName: '', //省份查询
					areaName: '', //地区查询
					title: '',
					precise: '', //导航栏
					//招标分类
					noticeType: '招标公告',
				},
				locationName: '全国',
				// 地区筛选数据
				filterPlaceData: null,
				
				
			};
		},
		created() {
			uni.$once('dataFlash', () => {
				
				if (uni.getStorageSync('isLogin')==1) {
					this.bindPhone()
					
					this.onLogin()
					
					setTimeout(() => {
						this.getCid()
						
					}, 5000)
				}
			
			})
			uni.$on('bindVip', () => {
						// 用户是否绑定vip
						this.bindVip()	
			})	
			uni.$on('listUpdata', () => {
				
				// 拿取用户保存在本地的点赞和收藏数据
				let localisFav=uni.getStorageSync('localisFav')
				let localDigg=uni.getStorageSync('localDigg')
				let arr=this.list
				this.list=[]
				// 更新首页点赞收藏
				arr.forEach(item=>{
					if(localisFav){
						localisFav.forEach(fav=>{
							if(fav==item.id)
								item.isFav=1
						})
					}
					if(localDigg){
						localDigg.forEach(digg=>{
							if(digg==item.id)
								item.isDigg=1
						})
					}
					this.list.push(item)
				})
			
			})
		},
		onShow() {
			this.getPlaceData()			
			this.bindPhone()
			
			this.bindVip()
			
			// 查询当前是否有未读系统通知消息
			together.getNotionNews(this)
			
			this.$initPageTitle(); //初始化页面标题
			/*来源是登录时更新*/
			let source = uni.getStorageSync('source');
			if (source == 'login') {
				uni.removeStorageSync('source');
				this.loadData();
			}	
		},

		onLoad(e) {
			
			this.getbigEventGray()
			
			//登录im
			this.loginUniIm();
			
			// #ifdef APP-PLUS 
			// 判断当前是那个平台
			this.platform = this.$app.getPlatform(); 
			if(this.platform!='ios'){
				updateApp(); //更新提示
			}
			
			// #endif

			// #ifdef H5
			if (e.category_id > 0) {
				this.category_id = e.category_id;
			}
			if (e.category_index > 0) {
				this.category_index = e.category_index;
			}
			// #endif

			// 暂时让小程序定位
			// #ifdef MP || H5
			//获取地址信息
			this.getLocation()
			// #endif
			this.getCategory();
			
			
			
		},
		onPullDownRefresh() {
			uni.showLoading({
				title: '刷新中'
			});
			this.loadData();
			this.getCategory();

		},

		mounted() {
			uni.hideToast();
		},
		beforeDestroy(){
			// 数据更新  是否绑定手机号  登录前点击招标  传送设备cid
			uni.$off('dataFlash');
			// 查询用户信息 是否为VIP用户
			uni.$off('bindVip');
			// 用户本地缓存点赞和收藏数据更新
			uni.$off('listUpdata');
		},	
		methods: {
			
			//登录uni-im
			loginUniIm(){
				//因为我们的token有效期和uni-im的有效期不一致,所以需要一旦用户打开app进来就要对uni-im进行登录
				if (uni.getStorageSync('isLogin')==1){
					console.info("开始uni-im.......");
					let url = this.$baseApp.api.user.getUniImJwtToken;
					this.$http.post(url).then(async res => {
						if (res.code == 200) {
							 
							// console.info("获取的token是:",res.data);
							let signedData = res.data ;
							//5. 将签名后的signedData作为参数调用uni-im的登录接口
							try{
								let ress = uniImCo.loginWithJWT(signedData)
								//console.log("ress========",ress)
								if(ress.errCode) {
									console.err(JSON.stringify(ress))
								} else {
									uniIdMutations.updateUserInfo()
									 
								}
							}catch(e){
								console.error(e.errCode+"   "+e.errSubject);
								console.error(e.errMsg);
							}
						}
					})
				}
			},
			
			// 用户绑定手机
			bindPhone(){
				// 登录且没有手机 该处仅适用于app微信登录   小程序会在绑定手机号时缺少必要字段数据而失败 uni.getStorageSync('unionid')
				// 且微信小程序在登录时会判断缺少手机号进入绑定页面
				 // #ifdef APP-PLUS 
				setTimeout(()=>{
					if (uni.getStorageSync('isLogin')==1){
						let userInfo=uni.getStorageSync('userInfo')
						if(typeof userInfo=='string'){
							userInfo=JSON.parse(userInfo)
						}
						// console.log("userInfo------------------",userInfo.phone,userInfo)
						if (!userInfo.phone) {
						
							uni.reLaunch({
								url: `/pagesUser/bindMailbox?status=1&page=3`
							});
						}
					}
				},1000)
				 // #endif
			},
			
			// 用户是否绑定vip
			bindVip() {
				let isLogin=uni.getStorageSync('isLogin')
				if(isLogin==1){
					let url = this.$baseApp.api.user.getUserInfo;
					this.$http.get(url).then(res => {
						if (res.code == 200) {
							uni.setStorageSync("userInfo", res.data);
							// 保存用户是否是vip
							if (res.data.vipEndTime) {
								let timestamp = new Date().getTime();
								if(timestamp<=res.data.vipEndTime){
									// 将正常的会员时长值保存至缓存
									uni.setStorageSync("vipEndTime", res.data.vipEndTime);
									// 用户为正常会员
								}else{
									uni.removeStorageSync('vipEndTime');
								}
								
							}
						}
					
					})
				}
				
			},
			
			// 获取用户标识
			getCid() {
				if (!uni.getStorageSync('push_clientid')) {
					// uni-app客户端获取push客户端标记
					
					uni.getPushClientId({
						success: (res) => {
							let push_clientid = res.cid
							// console.log('客户端推送标识:', push_clientid)
							uni.setStorageSync('push_clientid', push_clientid);
							uni.getSystemInfo({
								success: (res1) => {
									this.getsaveClientId(push_clientid, res1.deviceBrand + " " +
										res1.deviceModel);
								}
							});
						},
						fail(err) {

						}
					})
					
				}


			},


			getsaveClientId(clientId, clientType) {
			
				let param = {
					clientId: clientId,
					clientType: clientType
				}
				this.$app.request({
					url: this.$baseApp.api.common.saveClientId,
					method: 'POST',
					data: param,
					dataType: 'json',
					success: res => {
						// console.log("这里是用户标识 ===================", res)
					},
					complete: res => {
						
					}
				});
			},
			// 查询是否出现大事件
			getbigEventGray() {
				let url = this.$baseApp.api.common.bigEventGray;
				this.$http.post(url).then(res => {
					if (res.data == 1) {
						// 置灰
						this.usedGrayPage = true
					}
				})
			},
			


			// 获取用户位置信息
			getuserPlaceData() {
				let agreePlace = uni.getStorageSync('agreePlace');

				if (agreePlace == 1) {
					return
				} else {
					this.showLocation()
				}
			},


			// 显示选择器
			showPicker() {
				this.$refs.treePicker._show();
			},
			//监听选择（ids为数组）
			selectChange(ids, names) {
				// console.log(ids, names)
				this.queryData.lbsAreaName = ''
				this.queryData.lbsProvinceName = ''
				let size = ids.length
				// 遍历ids，将值传到接口之中
				if (size > 3) {
					this.$alert('最多选择三个省份或者城市');
					return;
				} else if (size == 0) {
					this.locationName = '全国';
					this.queryData.provinceName = '';
					this.queryData.areaName = '';
					this.scroller.num = 1;
					this.getData();
				} else {
					let provinceName = '';
					let area = '';
					let str1, str2

					ids.forEach((item, index) => {
						if (item.indexOf('A') == -1) {
							// 市
							str1 = item.split('B')
							area += str1[1] + ",";
						} else {
							// 省
							str1 = item.split('A')
							provinceName += str1[1] + ",";
						}
					})
					this.queryData.provinceName = provinceName;
					this.queryData.areaName = area;

					if (size == 1) {
						this.locationName = area.split(",")[0] || provinceName.split(",")[0]
					} else {
						this.locationName = '多地区';
					}

					this.scroller.num = 1;

					this.getData();
				}

			},


			// 保存筛选的地域数据
			saveFilterPlaceData() {
				let placeData = uni.getStorageSync('placeData');

				let data = []
				// 遍历地域数据

				if (placeData) {

					placeData.forEach((item1, index1) => {
						data.push({
							"name": item1.name,
							"value": "A" + item1.name,
							"submenu": []
						})

						item1.city.forEach((item2, index2) => {
							data[index1].submenu.push({
								"name": item2.name,
								"value": "B" + item2.name

							})
						})
					})
					// 将转变后的地域数据保存至缓存
					uni.setStorageSync('filterPlaceData', data);
				}


				// 删除已经缓存中的原有的地域和类型
				uni.removeStorageSync('placeData');
				

				this.filterPlaceData = uni.getStorageSync('filterPlaceData');
				

			},

			// 获取各地地域数据
			getPlaceData() {
				// 查看缓存中是否存在该数据	
				this.placeData = uni.getStorageSync('filterPlaceData');
			
					if (!this.placeData ) {
					// 从接口获取地区数据
					let url = this.$baseApp.api.common.findAllAddress
					this.$http.get(url).then(res => {
						if (res.code == 200) {
							this.placeData = {}
							this.placeData = res.data
							this.time = Date.now()
							// 将数据存贮至缓存
							uni.setStorageSync('placeData', this.placeData);
							uni.setStorageSync('time', this.time);
							this.saveFilterPlaceData()
						} else {
							this.$alert(res.msg);
						}
					})

				} else {
					//判断当前时间戳与之前的时间戳间隔时间是否大于等于一个月
					this.time = uni.getStorageSync('time');
					let currentTime = Date.now()
					let overTime = (currentTime - this.time) / 1000
					if (overTime >= 2592000) {
						// 清除缓存再次调用接口
						uni.removeStorageSync('filterPlaceData')
					
						uni.removeStorageSync('index_showLocation')
						uni.removeStorageSync('agreePlace')
						this.getPlaceData()
					} else {

						this.filterPlaceData = uni.getStorageSync('filterPlaceData');
					
					}
				}
			},
			getLocation() {
				getMyLocation(res => {
					// console.info("获取地址++", res);
					// this.locationName = res.cityName || '全国';
					this.locationName = res.cityName && res.cityName.length > 0 ? res.cityName : '全国';
					// if(res.provinceName){
					// 	this.queryData.lbsProvinceName = res.provinceName ;
					// }
					if (res.cityName) {
						this.queryData.lbsAreaName = res.cityName
					}

				}, err => {
					this.queryData.areaName = '';
					this.locationName = '全国';

				})



			},

			//授权操作
			showLocation() {
				let index_showLocation = uni.getStorageSync('index_showLocation');

				//如果已经选择,那么不需要再提示了
				if (index_showLocation == 1) {
					return
				}
				uni.setStorageSync('index_showLocation', 1)
				let that = this;
				//如果3秒之后,显示定位信息
				setTimeout(() => {
					uni.showModal({
						title: '获取地理位置服务',
						content: '才能招标将要获取您的位置信息以便于更好地查看当地的招标信息，接下来您将进行位置授权操作！',
						cancelText: '不需要',
						cancelColor: '#ff2828',
						confirmText: '可以',
						success(confirm) {
							uni.setStorageSync('index_showLocation', 1)
							if (confirm.confirm) {
								console.info('点击了同意按钮');
								// 用户允许位置授权
								uni.setStorageSync('agreePlace', 1)
								that.getLocation();
							} else {
								console.info('点击了取消按钮');

							}
						}
					})
				}, 5000);
			},

			//登录之前的页面
			onLogin() {


				let page = uni.getStorageSync('LoginPage');
				
				uni.removeStorageSync('LoginPage');
				if (page) {
					
					uni.showModal({
						title: '提示',
						content: '是否查看上一条招标信息？',
						confirmText: '是',
						cancelText: '否',
						success: result => {
							if (result.confirm) {
								uni.navigateTo({
									url: page
								})
							}
						}
					})

				}

			},

			//点击搜索
			clickSearch() {

				uni.navigateTo({
					url: `/pagesFind/findSearch/findSearch?current=1`
				});

			},
			//打开地址
			openLocation() {
				this.$refs.popup.open()
			},

			//显示更多,如果支查询了城市,就加省份,如果是省份,就加入全国
			showMore() {
				this.scroller.num = 1;
				//回到顶部
				this.scroller.scrollTo(0)
				//获取地址信息
				/* getMyLocation(res=>{
					console.info("获取地址",res);
					this.locationName=res.provinceName||'全国';
					
					if(res.provinceName){
						this.queryData.lbsAreaName='' ;
						this.queryData.lbsProvinceName = res.provinceName ;
					} 
					 
					this.getData()
				},err=>{
					this.queryData.areaName='';
					this.locationName='全国';
					this.getData()
				}) */
			},

			//选择城市
			selectCity(selected) {
				this.$refs.popup.close();

				this.queryData.lbsAreaName = ''
				this.queryData.lbsProvinceName = ''
				
				let size = selected.city.length + selected.provice.length;
				if (size > 3) {
					this.$alert('最多选择三个省份或者城市');
					return;
				} else if (size == 0) {
					// this.locationName = '全国';
					this.queryData.provinceName = '';
					this.queryData.areaName = '';
					this.scroller.num = 1;
					this.getData();
				} else {
					let provinceName = '';
					let area = '';
					selected.provice.forEach((item, index) => {
						provinceName += item + ",";
					})
					selected.city.forEach((item, index) => {
						area += item + ",";
					})
					

					this.queryData.provinceName = provinceName;
					this.queryData.areaName = area;

					if (area.split(",").length > 1 || provinceName.split(",").length > 1) {
						this.locationName = '多地区';
					} else {
						this.locationName = area || provinceName;
					}
					this.scroller.num = 1;
					this.getData();
				}


			},

			//点击招标公告,中标公告
			// toDetailPage(e) {
			// 	console.info("-----------",e)
			// 	this.queryData.title = '';
			// 	this.queryData.noticeType = e.item.name;
			// 	this.list = [];
			// 	this.getData();
			// },
			toDetailPage(e) {
				console.info("-----------", e)
				this.queryData.title = '';
				this.queryData.noticeType = e
				this.list = [];
				this.getData();
			},
			/*初始化滚动*/
			initScroller(scroller) {
				console.log("scroller",scroller)
				this.scroller = scroller;
				this.scroller.num = 1
				this.scroller.pageSize = 20
			},

			/*刷新数据*/
			refreshData() {
				uni.showLoading({
					title: '刷新中'
				});
				this.scroller.resetUpScroll();
			},

			/*加载数据*/
			loadData() {
				this.slider = [];
				this.list = [];
				this.currentSliderIndex = 0;
				if (this.scroller) {
					this.scroller.resetUpScroll();
				}

			},

			/*获取子类别数据*/
			getCategory() {
				// console.info('分类导航');

				this.category = [{
					id: 99,
					name: '全部'
				}]

				let url = this.$baseApp.api.zhaobiao.hotWord;

				this.$http.get(url).then(res => {
					if (res.code == 200) {
						
						res.data.zhaobiao.forEach(item => {
							this.category.push(item)
						})

						// this.category.push(...res.data.zhaobiao);
						if (this.category_index > -1) {
							let nextIndex = this.category_index - 1;
							nextIndex = nextIndex <= 0 ? 0 : nextIndex;
							this.scroll_category_id = `category_id-${nextIndex}`; //动画滚动,滚动至中心位置
						}
					} else {
						this.$alert(res.msg);
					}
				},err=>{
					setTimeout(()=>{
						this.getCategory()
					},100000)
				})
			},

			/*获取数据*/
			getData() {
			
				/* this.$app.request({
					url: this.$api.article.index,
					data: {
						category_id: this.category_id,
						page_index: this.scroller.num,
						page_size: this.scroller.size
					},
					method: 'POST',
					dataType: 'json',
					success: res => {
						
						console.info(res.data.list);
						if (res.code == 0) {
							if (this.scroller.num == 1) {
								this.list = [];
							}
							if (this.slider.length == 0) {
								this.slider = res.data.slider;
							}
							this.list = this.list.concat(res.data.list);
							this.scroller.endByPage(res.data.list.length, res.data.page);
							this.showPageLoading = false;
						} else {
							this.scroller.endSuccess();
							this.$alert(res.msg);
						}
					},
					fail: res => {
						this.scroller.endErr();
					},
					complete: res => {
						uni.stopPullDownRefresh();
						uni.hideLoading();
					}
				}); */
				let url = this.$baseApp.api.zhaobiao.zbList;
				let data = {

					page: this.scroller.num,
					pageSize: this.scroller.size,
					precise: this.queryData.precise, //导航栏关键字分类查询
					noticeType: this.queryData.noticeType, //招标公告 中标候选人 中标结果 更正公告公示,示例值(招标公告)
					areaName: this.queryData.areaName || '', //地区
					provinceName: this.queryData.provinceName || '', //省份
					lbsAreaName: this.queryData.lbsAreaName || '', //定位的省份
					lbsProvinceName: this.queryData.lbsProvinceName || '', //定位的城市
					projectName: this.queryData.title, //项目名称,
					location: ''
				};

				this.$http.get(url, data).then(res => {
					
					if (res.code == 200) {
						if (this.scroller.num == 1) {
							this.list = [];
						}
						// 拿取用户保存在本地的点赞和收藏数据
						let localisFav=uni.getStorageSync('localisFav')
						let localDigg=uni.getStorageSync('localDigg')
						let arr=null
						res.data.content.forEach(item => {
							
							if(localisFav){
								localisFav.forEach(fav=>{
									if(fav==item.id)
										item.isFav=1
								})
							}
							if(localDigg){
								localDigg.forEach(digg=>{
									if(digg==item.id)
										item.isDigg=1
								})
							}
							
							if (item.noticeTitle.length >= 36) {
								arr = item.noticeTitle

								item.noticeTitle = arr.slice(0, 35) + "..."
							}


						})


						this.list = this.list.concat(res.data.content);
						this.scroller.endByPage(res.data.content.length, res.data.totalPages);
						this.showPageLoading = false;
						uni.hideLoading();
					} else {
						this.scroller.endSuccess();
						this.$alert(res.msg);
					}
				},err=>{
					
					this.showPageLoading = false;
				})
			},

			/*切换导航*/
			categoryChange(category_id, index, name) {
				if (category_id == 99) {
					this.queryData.precise = ''
				} else {
					this.queryData.precise = name
				}

				this.showMenu = false;
				this.category_index = index;
				this.category_id = category_id;
				var nextIndex = index - 1;
				nextIndex = nextIndex <= 0 ? 0 : nextIndex;
				this.scroll_category_id = `category_id-${nextIndex}`; //动画滚动,滚动至中心位置
				this.loadData();

				// #ifdef H5
				// uni.navigateTo({
				// 	url: '/pages/article/list?category_id=' + this.category_id + '&category_index=' + this.category_index
				// });
				// #endif
			},

			/*广告切换*/
			sliderChange: function(e) {
				this.currentSliderIndex = e.detail.current;
			},

			/*滚动时导航栏浮动*/
			navFloatShow(scroller) {
				if (scroller) {
					if (scroller.scrollTop > 60) {
						if (!this.showNavFloat) {
							this.showNavFloat = true;
						}
					} else {
						if (this.showNavFloat) {
							this.showNavFloat = false;
						}
					}
				}
			},
			/*菜单框展示*/
			menuShow(value) {
				this.showMenu = value;
			},
			/*隐藏导航浮动*/
			navFloatHide() {
				this.showNavFloat = false;
			}
		}
	};
</script>

<style scoped lang="scss">
	page {
		height: 100%;

	}

	.page {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		height: 100%;
	}



	.content {
		flex: 1;
		width: 100%;
		height: 100rpx;

		.classfiy {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 100%;
			// height: 100rpx;
			height: auto;
			padding: 0 15rpx;
			box-sizing: border-box;

			.type {
				padding: 5rpx;
				margin: 10rpx 5rpx;
				background-color: #dbf1e1;
				flex: 1;
				// height: 100rpx;
				width: 20%;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #19be6b;
				border-radius: 10rpx;
			}

		}
	}

	/*头部*/
	.top {

		/*页面标题*/
		.page-title {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 90rpx;
			text-align: center;
			border-bottom: 1rpx solid #efefef;
			z-index: 9999;
			line-height: 1;

			image {
				height: 50rpx;
				width: 280rpx;
				margin-left: -35rpx;
			}
		}

		/*搜索*/
		.search {
			padding: 24rpx 24rpx 0 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.logo {
				height: 60rpx;
				width: 374rpx;
				margin-right: 30rpx;
			}

			.input {
				margin-left: 0 !important;
				display: flex;
				align-items: center;
				height: 70rpx;
				width: 100%;
				background: #f5f5f5;
				border-radius: 34rpx 34rpx 34rpx 34rpx;

				/deep/ .icon {
					margin-left: 28rpx;
					color: #aaaaaa;
					font-size: 32rpx;
					line-height: 1;
				}

				text {
					margin-left: 14rpx;
					font-size: 30rpx;
					color: #aaaaaa;
					line-height: 1;
				}
			}

			.location {
				// width: 200rpx;
				font-size: 15px;
				color: #666666;
			}

			.user {
				display: flex;
				align-items: center;

				/deep/ .icon {
					margin-left: 24rpx;
					color: #aaaaaa;
					font-size: 38rpx;
					margin-top: 4rpx;
				}

				image {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					margin-left: 25rpx;
				}
			}
		}

		/* 顶部navbar */
		.navbar {

			/*分类*/
			.menu {
				position: relative;
				height: 80rpx;
				white-space: nowrap;
				padding: 15rpx 0 6rpx;
				z-index: 10;
				display: flex;
				align-items: center;
				justify-content: space-between;

				/*分类*/
				.category {
					width: 650rpx;
					margin-left: 30rpx;
					white-space: nowrap;
					position: relative;

					scroll-view {
						width: auto;

						.item {

							position: relative;
							display: inline-block;
							margin: 0 31rpx 0;
							height: 80rpx;
							text-align: left;
							padding-top: 7rpx;

							//line-height: 80rpx;
							&:first-child {
								margin-left: 10rpx;
							}

							&:after {
								content: '';
								width: 0;
								height: 0;
								position: absolute;
								left: 50%;
								bottom: 0;
								transform: translateX(-50%);
								transition: 0.3s;
							}

							.text {
								position: relative;
								width: auto;
								height: auto;
								line-height: auto;
								display: inline-block;

								text {
									font-size: 36rpx;
									font-weight: bold;
									color: #555;
								}

								image {
									position: absolute;
									top: 16rpx;
									right: -14rpx;
									width: 50rpx;
									height: 50rpx;
									display: none;
								}
							}
						}

						.current {
							&:after {
								width: 50%;
							}

							.text {
								text {
									font-size: 40rpx;
									font-weight: bold;
									color: #262626;
								}

								image {
									display: block;
								}

								border-bottom: 6rpx solid #71d5a1;
							}
						}
					}
				}

				.list {
					width: 70rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					//box-shadow: -4rpx 0 0 #e9ebee;
					//box-shadow: -2px 0 0 #262626;
					/deep/ .icon {
						font-size: 36rpx;
						margin-top: -6rpx;
					}
				}
			}
		}
	}

	.menu-block {
		position: absolute;
		top: 0;
		left: 0;
		background: #fff;
		border-bottom: 1rpx solid #f5f5f5;
		padding: 20rpx 0 50rpx;
		z-index: 100;
		width: 100%;

		//box-shadow: 0 15rpx 10rpx -15rpx #e9ebee;
		.list {
			padding-left: 10rpx;

			text {
				background: #f5f7fa;
				border-radius: 8rpx;
				font-size: 32rpx;
				margin: 12rpx 20rpx;
				display: inline-block;
				height: 72rpx;
				width: 144rpx;
				line-height: 72rpx;
				text-align: center;
			}

			.current {
				color: #fff;
				background-color: rgba(43, 195, 118, 1.0);
				// color: #26c173;
				color: #fff;
				// background: #8cc7b5;
				//font-size: 32rpx;
			}
		}
	}

	.scroll {
		height: 100%;
	}

	/*幻灯片广告 */
	.swiper {
		height: 350rpx;
		margin: 14rpx 24rpx 0;

		image {
			height: 350rpx;
			width: 100%;
			border-radius: 15rpx;
			//box-shadow: 0 0 12px #dddee1;
		}

		.current {
			width: 97%;
			height: 350rpx;
			margin: 1.5% 1.5%;
			transition: all 0.2s ease-in 0s;
		}

		.item {
			position: relative;

			.title {
				position: absolute;
				left: 0;
				bottom: 0;
				display: flex;
				justify-content: center;
				width: 100%;

				text {
					margin: 7% 6%;
					display: flex;
					align-items: center;
					//background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
					//background-image: linear-gradient(90deg,rgba(255, 181, 19,.8),rgba(255, 181, 19,.2));
					color: #fff;
					display: -webkit-box;
					text-overflow: ellipsis;
					word-break: break-all;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					font-size: 34rpx;
					padding: 14rpx 20rpx;
					max-width: 610rpx;
					line-height: 1.3;
					border-radius: 5rpx;
				}
			}
		}
	}

	/*浮动navbar*/
	.floatbar {
		//border-bottom: 1rpx solid #e8e8e8;
		box-shadow: 0px 2px 2px -2px #e8e8e8;
		padding-bottom: 12rpx;
	}

	/deep/ .no-data {
		margin-top: 200rpx;
	}
</style>
